@charset "utf-8";
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
@mixin mi($width,$height,$bg){
    width:$width;
    height: $height;
    background: $bg;
}
@mixin wh($width,$height){
    width:$width;
    height: $height;
}
@mixin size($font,$size,$color){
    font-family: $font;
    font-size: $size;
    color: $color;
}
input:hover{
    animation: dong 1s linear both;
}
.upper-head{
   @include wh(100%,61px); 
   text-indent: 183px;
   border-bottom: 1px solid #dfdfdf;

   a{
       color: #444f58;
       font-size: 13px;
       line-height: 61px;
   }
   a:nth-child(3){
       color: #99999a;
   }
}
a:hover{
    color:deepskyblue;
}
a:focus{
    color: red;
}
input{
    cursor: pointer;
}

.upper-tie{
    @include wh(100%,1796px);
    .upper-li{
        @include wh(393px,1623px);
        .upper-left{
            @include wh(210px,242px);
            margin-left: 183px;
            margin-top: 81px;
            border-bottom: 1px solid #dfdfdf;
            border-top: 1px solid #dfdfdf;
            
            a{
                color: #878787;
                font-size: 13px;
                line-height: 32px;
                margin-left: 8px;
            }
            a:hover{
                color:deepskyblue;
                }
                a:focus{
                    color: red;
                }
            h2{
                margin-left: 8px;
                font-size: 15px;
                color: #444f58;
                margin-top: 26px;
                margin-bottom: 9px;
                font-weight: normal;
            }
        }
    }
    .upper-race{
        width: 761px;
        margin-left: 30px;
         h1{
            color: #444f58;
            font-size: 20px;
            margin-top: 37px;
            margin-bottom: 24px;
            font-weight: normal;
            }
        .upper-shai{
            width: 760px;
            border: 1px solid #dedede;
            .upper-condition{
                box-sizing: border-box;
                width: 758px;
                 border-bottom: 1px solid #e7e7e7;
                div{
                    font-size: 15px;
                    color: #444f58;
                    margin-left: 24px;
                    line-height: 54px;
                    float: left;
                    overflow: hidden;
                    
                }
                #upper-add1{
                    float: left;
                }
                .upper-add{
                    @include wh(109px,30px);
                    margin-top: 12px;
                    background: #878787;
                    color: white;
                    line-height: 30px;
                    text-align: center;
                    animation:fudong 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                    span{
                        float: right;
                        padding-right: 3px;
                        cursor: pointer;
                    }
                }
                
            }
            .upper-chop{
                width: 758px;
                
                div{
                    float: left;
                    margin-left: 21px;
                    margin-top: 30px;
                }
                .upper-chop-add{
                    width: 510px;
                    .upper-chop-add1{
                        margin-left: 0px;
                        text-align: center;
                        line-height: 30px;
                        margin-top: 0px;
                        @include wh(110px,30px);
                        font-size: 13px;
                        color: #878787;
                        cursor: pointer;
                    }
                    #upper-chop-add2{
                        display: none;
                        margin-left: 0px;
                        margin-top: 0px;
                        .upper-chop-add1{
                        margin-left: 0px;
                        text-align: center;
                        line-height: 30px;
                        margin-top: 0px;
                        @include wh(110px,30px);
                        font-size: 13px;
                        color: #878787;
                    }
                    }
                }
                .upper-chop-button1{
                      @include  wh(58px,28px);
                      position: relative;
                      background: white;
                      border: 1px solid #e7e7e7;
                      border-radius: 4px;
                      text-align: center;
                      font-size: 13px;
                      color: #444f58;
                      line-height: 28px;
                      text-indent: 1em;
                      cursor: pointer;
                      .upper-chop-img1{
                          display: block;
                          position: absolute;
                          @include wh(17px,11px);
                          top: -29px;
                          left: -31px;
                          img{
                             @include wh(17px,11px); 
                          }
                      }
                }
                .upper-chop-button2{
                      @include  wh(58px,28px);
                      position: relative;
                      background: white;
                      border: 1px solid #e7e7e7;
                      border-radius: 4px;
                      text-align: center;
                      font-size: 13px;
                      color: #444f58;
                      line-height: 28px;
                      text-indent: 1em;
                      margin-left:12px;
                      cursor: pointer;
                      text-align: center;
                      text-indent: 0px;
                }      
            }
             .upper-chop2{
                width: 760px;
                div{
                    float: left;
                }
                .upper-chop2-li{
                    font-size: 13px;
                    color: #444f58;
                    margin-top: 30px;
                    li{
                        float: left;
                        list-style: none;
                        margin-left: 10px;
                    }
                    li:first-child{
                        margin-left: 21px;
                        font-size: 14px;
                    }
                }
             .upper-chop-search{
                 margin-left: 30px;
                  margin-top: 24px;
                  @include wh(119px,28px);
                  position: relative;
                 input[type="search"]{
                     @include wh(119px,28px);
                     border-radius: 14px;
                     text-indent: 2em;
                 }
                 img{
                     display: block;
                     position: absolute;
                     top: 0;
                     right: 0;
                     @include wh(26px,28px);
                 }
             } 
             .upper-chop-check{
                 @include wh(656px,121px);
                 background: #efefef;
                 margin-left: 70px;
                 margin-top: 24px;
                 margin-bottom: 21px;
                 overflow-y: scroll;
                 width: 600px;
                 li{
                     float: left;
                     margin-top: 30px;
                     margin-left: 35px;
                     list-style: none;
                 input{
                     margin-bottom: 18px;
                     @include wh(15px,15px);
                     cursor: pointer;
                 }
                 label{
                     font-size: 13px;
                     color: #878787;
                     
                 }
                 }
             }  
             .upper-chop2-button{
                 margin-left: 227px;
                 input[type="button"]{
                     @include wh(112px,30px);
                     background: #eb413d;
                     color: white;
                     border-radius: 15px;
                     margin-bottom: 23px;
                     cursor: pointer;
                 }
                 input[type="button"]:nth-child(2){
                     @include wh(112px,30px);
                     background:white ;
                     color:#eb413d;
                     cursor: pointer;
                 }
             }
            }
            .upper-money{
                @include wh(758px,52px);
                border-bottom: 1px solid #e7e7e7;
                border-top: 1px solid #e7e7e7;
                div{
                    float: left;
                    margin-top: 21px;
                    margin-left: 22px;
                    font-size: 14px;
                    color: #444f58;
                }
                .upper-monery1{
                    font-size: 15px;
                    color: #878787;
                }
                .upper-money2{
                    @include wh(72px,40px);
                     margin-top:10px;
                     margin-left: 45px;
                    input[type="number"]{
                    @include wh(50px,30px);
                    border-radius: 4px;
                    text-indent: 1em;
                    cursor: pointer;
                }
                }
                .upper-money3{
                    @include wh(72px,40px);
                     margin-top:10px;
                     margin-left:5px;
                    input[type="number"]{
                    @include wh(55px,30px);
                    border-radius: 4px;
                    text-indent: 1em;
                    cursor: pointer;
                }
                }
                input[type="button"]{
                    margin-top:12px;
                    margin-left: 5px;
                    @include wh(44px,30px);
                    background: #eb413d;
                     color: white;
                      border-radius: 4px;
                      cursor: pointer;
                }
            }
            .upper-summer{
                @include wh(758px,54px);
                li{
                    margin-top: 20px;
                    margin-left: 36px;
                    list-style: none;
                    float: left;
                    font-size: 13px;
                    color: #878787;
                    cursor: pointer;
                }
                li:first-child{
                    margin-top: 20px;
                    margin-left: 22px;
                    font-size: 14px;
                    color: #444f58;
                    font-weight: normal;
                }
                li:hover{
                   color: deepskyblue;
               }
            }
            .upper-new{
               @include wh(760px,54px);
               line-height: 54px;
               background: #efefef;
               li{
                   float: left;
                   list-style: none;
                   font-size: 14px;
                   color: #878787;
                   margin-left: 57px;
                   cursor: pointer;
               }
               li:first-child{
                   margin-left: 23px;
               }
               li:hover{
                   color: deepskyblue;
               }
            }
            
            
        }
    }
}
.upper-coke{
    @include wh(760px,1098);
    margin-top: 17px;
    ul{
        @include wh(760px,1098);
        li{
            float: left;
            @include wh(244px,331px);
            margin-right: 12px;
            margin-bottom: 27px;
            list-style: none;
            .upper-coke-img1{
                @include wh(243px,244px);
                margin-bottom: 20px;   
                border: 1px solid #f6f6f6;
               img{
                   margin: 23px 17px 19px 25px;
                   @include wh(203px,203px);
               }
               img:hover{
                   animation: zhuang 500ms linear both; 
               }
            }
            p{
                font-size: 13px;
                color: #444f58;
                line-height: 26px;
            }
            p:nth-child(3){
                color: #99999a;
                line-height: 20px;
            }
            .upper-coke-div1{
                float: left;
                font-size: 12px;
                background: #eb413d;
                color: white;
                line-height: 19px;
                @include wh(59px,19px);
                text-align: center;
                cursor: pointer;
            }
            .upper-coke-div2{
                float: left;
                font-size: 12px;
                line-height: 19px;
                background: black;
                color: white;
                @include wh(59px,19px);
                text-align: center;
                cursor: pointer;
            }
            .upper-coke-div3{
                float: left;
                font-size: 12px;
                line-height: 19px;
                background:#878787;
                color: white;
                @include wh(59px,19px);
                text-align: center;
                cursor: pointer;
            }
        }
        li:nth-child(3n){
            margin-right: 0px;
        }
    }
    
}
